<template>
  <div class="out_bg">
    <div class="bg">
      <div class="nav">
        {{ BASETITLE }}
      </div>
      <div class="date_back">{{ date }}
        <ElButton v-if="route.path !== '/'" @click="$router.back()">返回</ElButton>
      </div>
      <router-view />
      <video class="bg-video" src="./assets/bg30.mp4" loop muted autoplay></video>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { EDP } from "@b/model/enum";
import { ElButton } from "element-plus";
import { useRoute } from 'vue-router';
import { BASETITLE } from "@b/model/enum";

const scale = ref(1)
const ewidth = ref(EDP.WIDTH + 'px')
const eheight = ref(EDP.HEIGHT + 'px')
const date = ref(new Date().toLocaleString())
const route = useRoute()
const getScale = () => {
  const out_bg = document.querySelector('.out_bg') as Element
  const width = out_bg.clientWidth
  const height = out_bg.clientHeight
  const det = EDP.WIDTH / EDP.HEIGHT
  const getScale = () => {
    if (width / height > det) {
      scale.value = height / EDP.HEIGHT
    } else {
      scale.value = width / EDP.WIDTH
    }
  }
  return getScale()
}
const setDate = () => {
  requestAnimationFrame(() => {
    date.value = new Date().toLocaleString()
    setDate()
  })
}
onMounted(() => {
  getScale()
  setDate()
  window.addEventListener('resize', getScale)
})
</script>

<style scoped>
.bg-video {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  font-size: 0;
  object-fit: fill
}

.out_bg {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: #01112b;
  display: flex;
  justify-content: center;
  align-items: center;
}

.out_bg .bg {
  width: v-bind(ewidth);
  height: v-bind(eheight);
  transform: scale(v-bind(scale));
  flex-shrink: 0;
  /* background: url(./assets/bg.png); */
  color: var(--color-white);
}

.bg .nav {
  width: v-bind(ewidth);
  background: url(./assets/title.png);
  background-size: 100% 100%;
  height: var(--nav-height);
  line-height: var(--nav-height);
  text-align: center;
  font-size: 2.6em;
  font-weight: 700;
  color: var(--color-white);
}

.bg .date_back {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--color-white);
  margin-bottom: 32px;
}

.bg .date_back .el-button {
  color: var(--color-white);
  background: #0f1245;
  border-color: #0a4299;
}
</style>